<!-- 属性选择器
    属性            匹配[属性]{}          匹配拥有该属性的元素
    属性值          匹配[属性=值]{}        匹配属性值等于值的元素
    属性值开头^     匹配[属性^=值]{}        匹配以属性值以值开头的元素
    属性值结尾$     匹配[属性$=值]{}        匹配以属性值以值结尾的元素
    属性值包含*     匹配[属性*=值]{}        匹配以属性值包含值的元素（属性值里只要含有就能匹配到）
    属性值组成~     匹配[属性~=值]{}        匹配以属性值由值组成的元素（属性值里的单词以空格分隔才能匹配到）
-->





<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>

        .div1 [class]{color: red;}

        .div2 [class=span2]{color: green;}

        a[href^="http"] {color: pink;}

        a[href$="http"] {color: pink;}

        a[href*="http"] {color: blue;}

        /* a[href~="http"] {color: blue;} */

    </style>
</head>



<body>


<div class="div1">
    <span>属性1</span>
    <span class="span2">属性2</span>
    <span>属性3</span>
</div>
<br>
<hr>
<br>
<div class="div2">
    <span>属性值1</span>
    <span class="span2">属性值2</span>
    <span>属性值3</span>
</div>
<br>
<hr>
<br>
<a href="http://example.com">以http开头的链接</a>
<a href="www://example.com">以www开头的链接</a>
<br>
<hr>
<br>
<a href="www://example.http">以http结尾的链接</a>
<a href="www://example.com">以https结尾的链接</a>
<br>
<hr>
<br>
<a href="http://example.http">包含http</a>
<a href="www://example.com">不含http</a>
<br>
<hr>
<br>
<a href="http://example.http">包含http</a>
<a href="www://example.com">不含http</a>

</body>
</html>